<template>
  <div class="col main-content mt-15">
      <el-table
        ref="openAuthTable"
        :data="openAuths"
        border
        stripe
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column
          label="第三方系统名称"
          width="120">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column
          prop="accessId"
          label="APP ID">
          <template slot-scope="scope">
            <div>
              <div class="table-edit-left">
                <el-input v-show="scope.row.idEdit" size="small"
                          v-model="scope.row.accessId"></el-input>
                <span v-show="!scope.row.idEdit">{{ scope.row.accessId }}&nbsp;</span>
              </div>
              <el-button type="text" v-show="!scope.row.idEdit" class="table-edit-right"
                         @click="edit(scope.$index,scope.row,'idEdit')">
                <i class="fa fa-edit"></i>
              </el-button>
              <el-button type="text" v-show="scope.row.idEdit" class="table-edit-right"
                         @click="editSave(scope.$index,scope.row,'idEdit')">
                <i class="fa fa-check"></i>
              </el-button>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="APP KEY">
          <template slot-scope="scope">
            <div>
              <div class="table-edit-left">
                <el-input v-show="scope.row.keyEdit" size="small" v-model="scope.row.accessKey"></el-input>
                <span v-show="!scope.row.keyEdit">{{ scope.row.accessKey }}&nbsp;</span>
              </div>

              <el-button type="text" v-show="!scope.row.keyEdit" class="table-edit-right"
                         @click="edit(scope.$index,scope.row,'keyEdit')">
                <i class="fa fa-edit"></i>
              </el-button>

              <el-button type="text" v-show="scope.row.keyEdit" class="table-edit-right"
                         @click="editSave(scope.$index,scope.row,'keyEdit')">
                <i class="fa fa-check"></i>
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="回调地址" min-width="120">
          <template slot-scope="scope">
            <div>
              <div class="table-edit-left">
                <el-input v-show="scope.row.urlEdit" size="small" v-model="scope.row.callbackUrl"></el-input>
                <span v-show="!scope.row.urlEdit">{{ scope.row.callbackUrl }}&nbsp;</span>
              </div>

              <el-button type="text" v-show="!scope.row.urlEdit" class="table-edit-right"
                         @click="edit(scope.$index,scope.row,'urlEdit')">
                <i class="fa fa-edit"></i>
              </el-button>

              <el-button type="text" v-show="scope.row.urlEdit" class="table-edit-right"
                         @click="editSave(scope.$index,scope.row,'urlEdit')">
                <i class="fa fa-check"></i>
              </el-button>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="状态" width="92" align="center">
          <template slot-scope="scope">
            <el-alert v-if="scope.row.status==0"
                      title="暂停"
                      type="error"
                      :closable="false">
            </el-alert>
            <el-alert v-else="scope.row.status==1"
                      title="启动"
                      type="success"
                      :closable="false">
            </el-alert>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="80px" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status==0" type="primary" size="mini"
                       @click="changeStatus(scope.$index, scope.row)">
              启用
            </el-button>
            <el-button v-else="scope.row.status==1" size="mini" type="danger"
                       @click="changeStatus(scope.$index, scope.row)">
              暂停
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
</template>
<style>

</style>
<script>
  import AdminService from 'src/service/admin'

  export default {
    name: "AdminOpenAuth",
    data() {
      return {
        openAuths: []
      }
    },
    methods: {
      getData: function () {
        const me = this;
        AdminService.openAuths().then(function (data) {
          if (data.code == 0 && data.datas != null) {
            me.openAuths = data.datas.map(v => {
              me.$set(v, 'idEdit', false)
              me.$set(v, 'keyEdit', false)
              me.$set(v, 'urlEdit', false)
              return v
            })
          }
        });
      },
      edit: function (index, data, key) {
        data[key] = true;
      },
      editSave: function (index, data, key) {
        const me = this;
        data[key] = false;
        AdminService.saveOpenAuth(data).then(function (result) {
          if (result != null) {
            me.$message.success(data.name + "的配置信息修改成功.");
          }
        });
      },
      changeStatus: function (index, data) {
        const me = this;
        if (data.status == 1) {
          data.status = 0;
        } else {
          data.status = 1;
        }
        AdminService.saveOpenAuth(data).then(function (result) {
          if (result != null) {
            me.$message.success("变更 " + data.name + " 的状态成功.");
          }
        });
      }
    },
    beforeMount: function () {
      this.getData();
    }
  }
</script>
